import {Component,Vue} from 'vue-property-decorator'
import  {BackPublicBill} from './BackPubicBill.interface'
@Component
export default class StepForm extends Vue {
    created(){
        var arr = [1,2,3,4,5];
        let rest = arr.reduce(function(preValue,curValue,index,array){
            return preValue + curValue;
        },5)
        console.log('rest='+rest)
     //   let res:any = this.unique_array_reduce([{title:'title1',lable:'label1'},{title:'title1',lable:'label1'},{title:'title2',lable:'label1'}])
    //    console.log(res)
    }

    /**
     * 在说如何去重之前，先来介绍一下reduce函数：

     array.reduce(callback[, initialValue]);

     写的具体一点，是这样子

     array.reduce(function(total, currentValue, currentIndex, array), initialValue);

     reduce方法会遍历数组，并且为数组中的每个元素，执行定义的callback方法，并把结果汇总为单个值返回。

     参数定义

     callback：为每个元素执行的方法，它有以下四个参数

     　　　total：累计器，也是最终返回的结果

     　　　currentValue：当前遍历的元素

     　　　currentIndex：当前遍历的元素的下标，可选

     　　　array：原始数组，可选

     initialValue：初始值

     需要注意的是，如果定义了initialValue，那么total的初始值就是initialValue，遍历则从第0项开始。

     如果没有定义，则total的初始值，会是第0项元素，遍历则从第1项开始。



     利用reduce函数封装去重方法

     由于最终希望返回的是一个去重后的数组，所以reduce函数的初始值要设置为空数组[]，这样，在遍历到符合条件的元素的时候，才能push进数组里。

     我封装了一个util工具方法：入参为原始数组，以及需要根据哪个key值去重，返回结果为最终去重后的数组



     */
     uniqueByKey(arr:any,key:any) {
        let hash:any = {};
        let result = arr.reduce((total:any, currentValue:any) => {
            if (!hash[currentValue[key]]) { //如果当前元素的key值没有在hash对象里，则可放入最终结果数组
                hash[currentValue[key]]= true; //把当前元素key值添加到hash对象
                total.push(currentValue); //把当前元素放入结果数组
            }
            return total; //返回结果数组
        },[]);
        return result;
    }
    //双重for（或while）循环是比较笨拙的方法，
    // 它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，那么将会非常耗费内存

    unique(arr:any){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        let res = [arr[0]]
        for (let i = 1; i < arr.length; i++) {
            let flag = true
            for (let j = 0; j < res.length; j++) {
                if (arr[i] === res[j]) {
                    flag = false;
                    break
                }
            }
            if (flag) {
                res.push(arr[i])
            }
        }
        return res

    }
    //数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在res中，
    // 则将其push进res中，最后将res返回即可获得去重的数组
    uniqueIndex1(arr:any){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        let res = []
        for (let i = 0; i < arr.length; i++) {
            if (res.indexOf(arr[i]) === -1) {
                res.push(arr[i])
            }
        }
        return res
    }
    //利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素
    uniqueIndex2(arr:any){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        return Array.prototype.filter.call(arr, function(item, index){
            return arr.indexOf(item) === index;
        });
    }
    //相邻元素去重
    // 这种方法首先调用了数组的排序方法sort()，然后根据排序后的结果进行遍历及相邻元素比对，如果相等则跳过改元素，直到遍历结束
    uniqueNear(arr:any){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        arr = arr.sort()
        let res = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== arr[i-1]) {
                res.push(arr[i])
            }
        }
        return res
    }
    //利用对象属性去重
    uniqProp(arr:[]){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        let res:[] = [],
            obj:object = {}
        for (let i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) {
                res.push(arr[i])
                // @ts-ignore
                obj[arr[i]] = 1
            } else {
                obj[arr[i]]++
            }
        }
        return res
    }
    //ES6中新增了数据类型set，set的一个最大的特点就是数据不重复。Set函数可以接受一个数组（或类数组对象）作为参数来初始化，利用该特性也能做到给数组去重
    uniqSet(arr:[]){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        return [...new Set(arr)]
    }
    //Array.from与set去重
    // Array.from方法可以将Set结构转换为数组结果，而我们知道set结果是不重复的数据集，因此能够达到去重的目的
    uniqForm(arr:[]){
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        return Array.from(new Set(arr))
    }
     unique_array_reduce = (array:any) => {
        // @ts-ignore
         return array.reduce((preResult, current) => {
            if (!preResult.includes(current)) {
                preResult.push(current)
            }
            return preResult
        }, [])
    }

    /**
     *   数组去重是开发中经常会碰到的一个热点问题。我们可以根据不同的应用场景来选择不同的实现方式。
     关注下面的标签，发现更多相似文章JavaScript前端鬼卡三杀呐FE @ HelloWorld发布了 7 篇专栏 · 获得点赞 552 · 获得阅读 24,722关注安装掘金浏览器插件打开新标签页发现好内容，掘金、GitHub、Dribbble、ProductHunt 等站点内容轻松获取。快来安装掘金浏览器插件获取高质量内容吧！评论提莫队长同志这么多去重文章，就数你的看的最舒服，感谢作者3天前  · 删除   回复千年虫25很多方法思想重复了，感觉还就是那三种，filter,hash以及解构加集合4月前  · 删除   回复dendoinkFE @ We-Work也可以参考这个方式：
     const unique_array_reduce = (array) => {
        return array.reduce((preResult, current) => {
            if (!preResult.includes(curre…展开5月前  · 删除   回复听风石相邻元素去重会有点问题，比如传入的数组是[1,2,"2",2,3,5,3]，就会出现两个数字27月前  · 删除   回复HY小菜鸡 回复 听风石: 一个数字2，一个字符串2。4月前  · 删除   回复超龙前端砖厂搬砖 @ 杭州氦氪科技如果数组里面是对象，去重set就不管用了，还得用笨方法1年前  · 删除   回复RoXoMWeb 前端农民工 回复 超龙: 没啥问题啊1年前  · 删除   回复lizy前端开发 @ 腾讯可是第一个就有问题啊，并没有能实现去重1年前  · 删除   回复我爱张苗苗搬砖工 回复 lizy: 没有问题吧  你可以控制台打印一下1年前  · 删除   回复查看更多 >相关推荐专栏蚂蚁保险体验技术15小时前前端前端防御性编程17816微博微信扫一扫专栏深圳湾码农1天前前端你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）27615微博微信扫一扫专栏SSH2小时前JavaScriptLaya2.x游戏引擎入门系列（三）：常用的动画开发33微博微信扫一扫专栏Tusi2天前JavaScript前端前端API层架构，也许你做得还不够487157微博微信扫一扫专栏云音乐前端技术团队3天前JavaScript一个简洁、有趣的无限下拉方案56373微博微信扫一扫专栏jeff_1天前JavaScript状态管理之 Flux、Redux、Vuex、MobX（概念篇）843微博微信扫一扫专栏火狼13天前JavaScript前端前端常用的 59 个工具类【持续更新】35430微博微信扫一扫专栏蜗牛的北极星之旅2天前JavaScript这样回答继承，面试官可能更满意15225微博微信扫一扫专栏刘小夕4天前前端Babel不容错过的 Babel7 知识52878微博微信扫一扫专栏前端先锋3天前Vue.js前端15个 Vue.js 高级面试题28541微博微信扫一扫关于作者鬼卡三杀呐FE @ HelloWorld  获得点赞552  文章被阅读24,722掘金小册JavaScript 设计模式核⼼原理与应⽤实践新人价 ￥9.95￥19.9深入理解NLP的中文分词：从原理到实践新人价 ￥19.95￥39.9新人专享好礼送你45元买小册立即领取相关文章7种方法实现数组去重52737DNS解析过程原理60Vue父子组件通讯与异步问题30好好的，谈什么对象130async/await使用小tips20目录前言方法实现双循环去重indexOf方法去重1indexOf方法去重2相邻元素去重利用对象属性去重set与解构赋值去重Array.from与set去重总结分享掘金浏览器插件 - 下载插件

            作者：鬼卡三杀呐
            链接：https://juejin.im/post/5aed6110518825671b026bed
                来源：掘金
            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
    }
     */

    items:any[] = [{
        backAccountName:'审批测试A',
        backAccountNo:'',
        bankName:'',
        bizId:'',
        caseClaimNo:'',
        days:3,
        idcardNo:'123',
        inHospitalDate:'2019-12-03',
        name:'佘态',
        no:1,
        publicSettleDate:'2019-12-03',
        number:3,
        outHospitalDate:'null',
        policyHolder:'郭卫',
        realPay:50.00,
        settleTime:'2019-12-03 11:28:19',
        socialcardNo:'null',
        sumNo:'122',
        sumPay:1000.00,
        sumPay2:1000.00
    },{
        backAccountName:'审批测试A',
        backAccountNo:'',
        bankName:'',
        bizId:'',
        caseClaimNo:'',
        days:3,
        idcardNo:'null',
        inHospitalDate:'null',
        name:'null',
        no:1,
        publicSettleDate:'2019-12-03',
        number:3,
        outHospitalDate:'null',
        policyHolder:'郭卫',
        realPay:50.00,
        settleTime:'2019-12-03 11:28:19',
        socialcardNo:'null',
        sumNo:'122',
        sumPay:1000.00,
        sumPay2:1000.00
    },]
    colums:any[] = [
        {title:'no',label:'序号'},
        {title:'publicSettleDate',label:'对公结算日期'},
        {title:'sumNo',label:'结算流水号'},
        {title:'bizId',label:'应付编号'},
        {title:'caseClaimNo',label:'赔案号'},
        {title:'policyHolder',label:'机构名称'},
        {title:'name',label:'参保人姓名'},
        {title:'idcardNo',label:'身份证号'},
        {title:'socialcardNo',label:'社保个人编码'},
        {title:'inHospitalDate',label:'费用开始时间'},
        {title:'outHospitalDate',label:'费用结束时间'},
        {title:'settleTime',label:'结算日期'},
        {title:'days',label:'天数'},
        {title:'realPay',label:'总费用'},
        {title:'number',label:'人数我'},
        {title:'sumPay',label:'总费用'},
        {title:'bankAccountName',label:'户名'},
        {title:'bankName',label:'开户行'},
        {title:'bankAccountNo',label:'帐户'},
        {title:'sumPay2',label:'支付金额'},
    ]
    private  today:Date = new Date()
    render(){
        const publicBill:any = {
            title:'结算表'
        }
        let sumPersonNum:number = 0
        let sumTotalFee2:number = 0
        let sumPayAmount:number = 0
        let arr:number[] = [0]
        let arrIf:Map<string,number> = new Map<string,number>()
        let rowspanIndex:number = 0
        return (
            <div>
                <table border={1} cellSpacing={0} height={600} width="100%">
                    <thead>
                        <tr>
                            {
                                this.colums.map(column=>{
                                    return <th>{column.label}</th>
                                })
                            }
                        </tr>
                    </thead>
                    <tbody>
                    {
                        //预处理哪几列要合并，合并多少列，从第几行开始
                        this.items.map((item,rowIndex)=>{
                            const row = rowIndex
                            this.colums.map((column,colIndex)=>{
                                const col = colIndex
                                if(column.title === 'sumNo'){
                                    if( !arrIf.has(item[column.title])){
                                        arrIf.set(item[column.title],1)
                                    }else{
                                        // @ts-ignore
                                        arrIf.set(item[column.title],arrIf.get(item[column.title])+1)
                                    }
                                }
                            })
                            console.log(arrIf)
                        })
                    }
                    {
                        //处理位置
                        arrIf.forEach((value:number,key:string,map:Map<string,number>)=>{
                            rowspanIndex+=value
                            arr.push(rowspanIndex)
                        })
                    }

                    {
                        //绘制表
                        this.items.map((item,rowIndex)=>{
                            const row = rowIndex
                            return <tr>
                                {
                                    this.colums.map((column,colIndex)=>{
                                        const col = colIndex
                                        if(column.title === 'publicSettleDate'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){

                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'sumNo'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){

                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'policyHolder'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){

                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'number'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){
                                                sumPersonNum+=item[column.title]
                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'sumPay'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){
                                                sumTotalFee2+=item[column.title]
                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'bankAccountName'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){
                                               // sumTotalFee2+=item[column.title]
                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'bankName'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){
                                            //    sumTotalFee2+=item[column.title]
                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'bankAccountNo'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){
                                               // sumTotalFee2+=item[column.title]
                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else if( column.title === 'sumPay2'){
                                            console.log('arr=='+arr)
                                            if(arr.indexOf(row)!=-1){
                                                sumPayAmount+=item[column.title]
                                                return <td rowspan={[...arrIf.values()][arr.indexOf(row)]}>{item[column.title]}</td>
                                            }else{
                                                return ''
                                            }
                                        }else{
                                            return <td>{item[column.title]}</td>
                                        }
                                    })
                                }
                            </tr>
                        })
                    }
                    {
                        //合计
                        this.items.map( (item,rowIndex)=>{
                            const row = rowIndex
                            return <tr>
                                {
                                    this.colums.map((column,colIndex) =>{
                                        const col = colIndex
                                        if(row ===0 ){
                                            if( [0,1,2,3,4,16,17,18].indexOf(col)!=-1){
                                                return <td></td>
                                            }
                                            if(col === 5){
                                                return <td colSpan={9} ></td>
                                            }
                                            if([6,7,8,9,10,11,12,13].indexOf(col)!=-1){
                                                return ''
                                            }
                                            if(col === 14){
                                                return <td>{sumPersonNum}</td>
                                            }
                                            if(col === 15){
                                                return <td>{sumTotalFee2}</td>
                                            }
                                            if(col === 19){
                                                return <td>{sumPayAmount}</td>
                                            }

                                        }
                                    })
                                }
                            </tr>
                        })
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}
